<template>
    <n-modal v-model:show="showRef" :mask-closable="false" class="custom-card" :style="bodyStyle" preset="card"
             @afterLeave="closeHandle">
        <template #header>
            {{ getTitle() }}
        </template>
        <template #default>
            <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="auto"
                    require-mark-placement="right-hanging" :style="{ maxWidth: '900px' }">
                <n-form-item label="项目名称" path="inputValue">
                    <n-input v-model:value="model.inputValue" placeholder="请输入项目名称"/>
                </n-form-item>
                <n-form-item label="项目编号" path="code">
                    <n-input v-model:value="model.code" placeholder="请输入项目编号"/>
                </n-form-item>
                <n-form-item label="项目介绍" path="textareaValue">
                    <n-input v-model:value="model.textareaValue" placeholder="Textarea" type="textarea" :autosize="{
            minRows: 3,
            maxRows: 5
          }"/>
                </n-form-item>
                <n-form-item label="负责人" path="selectValue">
                    <n-select v-model:value="model.selectValue" placeholder="Select" :options="generalOptions"/>
                </n-form-item>
                <n-form-item label="计划完成日期" path="datetimeValue">
                    <n-date-picker v-model:value="model.datetimeValue" type="date"/>
                </n-form-item>
                <n-form-item label="项目图片" path="imgValue">
                    <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                              :default-file-list="previewFileList"
                              list-type="image-card" @preview="handlePreview" :max="1">
                        点击上传
                    </n-upload>
                </n-form-item>
            </n-form>
        </template>
        <template #action>
            <n-button size="large" type="success" ghost @click="handleValidateButtonClick">
                验证
            </n-button>
        </template>
    </n-modal>
    <n-modal v-model:show="showImageModalRef" preset="card" style="width: 600px" title="一张很酷的图片">
        <n-image :src="previewImageUrlRef" style="width: 100%"></n-image>
    </n-modal>
</template>

<script lang="ts" setup>
import {ref, watch} from 'vue'
import type {UploadFileInfo} from "naive-ui";
import {requestPost} from "@/api";
import {useRoute, useRouter} from "vue-router";

const props = defineProps({
    show: Boolean,
    create: Boolean,
})
const router = useRouter();
const route = useRoute();
const formRef = ref()

const model = ref({
    inputValue: null,
    textareaValue: null,
    selectValue: null,
    datetimeValue: null,
    imgValue: null,
    code: null
})

const showImageModalRef = ref(false)
const previewImageUrlRef = ref('')

const previewFileList = ref<UploadFileInfo[]>([
    {
        id: 'react',
        name: '我是react.png',
        status: 'finished',
        url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
    },
    // {
    //   id: 'vue',
    //   name: '我是vue.png',
    //   status: 'finished',
    //   url: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
    // }
])

const bodyStyle = {
    width: '600px'
}
const getTitle = (): string => {
    if (props.create == true) return "新建项目"
    return "修改项目"
}
const showRef = ref(false)
const emit = defineEmits(['close'])
watch(props, newValue => {
    showRef.value = newValue.show
})
const closeHandle = () => {
    emit('close', false)
}

const handlePreview = (file: UploadFileInfo) => {
    const {url} = file
    previewImageUrlRef.value = url as string
    showImageModalRef.value = true
}

const generalOptions = ['groode', 'veli good', 'emazing', 'lidiculous'].map(
    (v) => ({
        label: v,
        value: v
    })
)
const rules = ref({
    inputValue: {
        required: true,
        trigger: ['blur', 'input'],
        message: '请输入项目名称'
    },
    code: {
        required: true,
        trigger: ['blur', 'input'],
        message: '请输入项目编号'
    },
    textareaValue: {
        required: false,
        trigger: ['blur', 'input'],
        message: '请输入项目介绍'
    },
    selectValue: {
        required: false,
        trigger: ['blur', 'change'],
        message: '请选择负责人'
    },
    datetimeValue: {
        type: 'number',
        required: false,
        trigger: ['blur', 'change'],
        message: '请输入日期'
    },

    imgValue: {
        required: false,
        trigger: 'change',
        message: '请选择图片'
    },
})
const handleValidateButtonClick = (e: MouseEvent) => {
    e.preventDefault()
    formRef.value?.validate((errors: any) => {
        if (!errors) {
            window.$message?.success('验证成功')
            console.log('点击验证提交', model.value)
            // 保存项目携带的参数
            let param = {
                "name": model.value.inputValue,
                "id": model.value.code,
                // "disabled": true,
                // "version": 0,
                // "order": 0,
                "code": model.value.code,
            }
            requestPost("/tib/project", param).then((res: any) => {
                window.$message?.success('保存成功')
                showRef.value = false;
                router.push({
                    name: 'list',
                    query: {
                        random: Math.random() * 100000000000000000
                    }
                });
            }).catch(err => {
                window.$message?.error(err.error)
            })
        } else {
            console.log(errors)
            window.$message?.error('验证失败')
        }
    })
}

// const negativeClick = () => {
//   // message.success('Cancel')
//   showRef.value = false
// }
// const positiveClick = () => {
//   // message.success('Submit')
//   showRef.value = false
// }
</script>

<style lang="scss" scoped>
//.custom-card {
//
//}
</style>
